<template>
  <div
    class="app-container"
    style="background-color: #efefef;
    width: 92%;
    border-radius: 5px;
    height: 95%;
    margin: 20px auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;"
  >
    <el-row>
      <el-col :span="24">
        <div style="background-color: white;height: 60px; line-height:60px;padding-left: 30px">
          <el-row>
            <el-col :span="22">
              <el-select v-model="monthNum" placeholder="请选择" @change="monthChange">
                <el-option
                  v-for="item in monthOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="downLoadReport">下载</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="50">
      <el-col :span="12">
        <div class="top-chart-box">
          <el-row>
            <el-col :span="24">
              <div class="chart-box-title">
                <div style="height: 40px;line-height: 40px;padding-left: 30px;color: #333333">
                  <span>报警种类分布</span>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div id="alarm-type-pie-chart" ref="alarm-type-pie-chart" style="height: 300px" />
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="top-chart-box">
          <el-row>
            <el-col :span="24">
              <div class="chart-box-title">
                <div style="height: 40px;line-height: 40px;padding-left: 30px;color: #333333">
                  <span>法庭报警数量</span>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div id="alarm-num-bar-chart" ref="alarm-num-bar-chart" style="height: 300px" />
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <div style="background-color: white;line-height:40px;height: 40px;padding-left: 30px">
          日报警记录
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div>
          <el-table
            :data="alarmRecordData"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="tribunalName"
              label="法庭名称"
            />
            <el-table-column
              prop="alarmDate"
              label="报警日期"
            />
            <el-table-column
              prop="equipmentTypeName"
              label="设备类型"
            />
            <el-table-column
              prop="alarmNum"
              label="报警数量"
            />
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-col :span="24">
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="total"
        />
      </div>
    </el-col>
    <el-row />
  </div>
</template>

<script>
import { getEquipmentTypeMap } from '@/utils/common'
import html2canvas from 'html2canvas'
import getJpeg from '@/utils/htmlJpegUtil'
const equipmentTypeMap = getEquipmentTypeMap()
// import { selectTribunalMonitorStatus } from '@/api/tribunalMonitor'
import { exportDayAlarmNumListByMonth, selectAlarmNumBarDataByMonth, selectAlarmTypePieDataByMonth, selectDayAlarmNumListByMonth } from '@/api/tribunalStatistic'
import { uploadJpeg } from '@/api/filemodule'
import moment from 'moment'
export default {
  name: 'Month',
  components: {
  },
  data() {
    return {
      // courtCode: '1327B30',
      // courtCode: '1329B32',
      currentPage: 1,
      monthNum: moment().month(),
      total: 100,
      pageSize: 10,
      pieChart: null,
      barChart: null,
      monthOptions: [

      ],
      alarmRecordData: [
      ],
      pieChartOption: null,
      barChartOption: null
    }
  },
  created() {
  },
  mounted() {
    this.updateMonthOptions()
    this.initAlarmTypePie()
    this.initCourtAlarmBar()
    this.renderAlarmRecordTable()
  },
  methods: {
    async downLoadReport() {
      // eslint-disable-next-line no-unused-vars
      let pieJpg=""
      // eslint-disable-next-line no-unused-vars
      let barJpg=""
      const pieJpeg = await getJpeg(this.$refs['alarm-type-pie-chart'])
      const form = new FormData()
      form.append('file', pieJpeg)
      const res = await uploadJpeg(form)
      console.log(res)
      if (res.success) {
        pieJpg = res.data
      }
      const barJpeg = await getJpeg(this.$refs['alarm-num-bar-chart'])
      const form1 = new FormData()
      form1.append('file', barJpeg)
      const res1 = await uploadJpeg(form1)
      console.log(res1)
      if (res1.success) {
        barJpg = res1.data
      }
      if (barJpg !== '' && pieJpg !== '') {
        const param = {
          month: this.monthNum,
          pieJpg: pieJpg,
          barJpg: barJpg
        }
        exportDayAlarmNumListByMonth(param).then(res3 => {
          console.log(res3)
          // const filename = res3.headers['content-disposition']
          const filename = 'monthreport.xls'
          const blob = new Blob([res3.data])
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob)
          downloadElement.href = href
          // downloadElement.download = decodeURIComponent(filename.split('filename=')[1])
          downloadElement.download = decodeURIComponent(filename)
          document.body.appendChild(downloadElement)
          downloadElement.click()
          document.body.removeChild(downloadElement)
          window.URL.revokeObjectURL(href)
        })
      }
    },
    monthChange() {
      console.log('month update')
      console.log(this.monthNum)
      this.renderAlarmRecordTable()
      this.renderCourtAlarmBar()
      this.renderAlarmTypePie()
    },
    updateMonthOptions() {
      const month = moment().month()
      console.log(month)
      this.monthNum = month
      const options = []
      for (let i = 0; i <= month; i++) {
        const temp = {
          value: i,
          label: (i + 1) + '月'
        }
        options.push(temp)
      }
      this.monthOptions = options
    },
    renderAlarmRecordTable() {
      const param = {
        month: this.monthNum,
        current: this.currentPage,
        pageSize: this.pageSize
      }
      selectDayAlarmNumListByMonth(param).then(res => {
        console.log(res)
        const success = res.success
        if (success) {
          const vo = res.data
          this.total = vo.total
          const voList = vo.list
          voList.map(item => {
            const equipmentType = item.equipmentType
            const equipmentTypeName = equipmentTypeMap.get(equipmentType)
            item.equipmentTypeName = equipmentTypeName
            return item
          })
          this.alarmRecordData = voList
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    initAlarmTypePie() {
      console.log('init alarm type pie')
      const pieChart = this.$echarts.init(document.getElementById('alarm-type-pie-chart'))
      this.pieChart = pieChart
      const option = {
        title: {
          text: ''
        },
        tooltip: {},
        legend: {
          orient: 'horizontal',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '70%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgb(135,250,202)'
              }
            }
          }
        ]
      }
      this.pieChartOption = option
      this.pieChart.setOption(this.pieChartOption)
      this.renderAlarmTypePie()
    },
    initCourtAlarmBar() {
      console.log('init court alarm bar')
      const barChart = this.$echarts.init(document.getElementById('alarm-num-bar-chart'))
      this.barChart = barChart
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            itemStyle: {
              normal: {
                color: 'DodgerBlue'
              }
            }
          }
        ]
      }
      this.barChartOption = option
      this.barChart.setOption(this.barChartOption)
      this.renderCourtAlarmBar()
    },
    handleDataRangeClick(tab, event) {
      console.log(tab.name)
      console.log(this.activeName)
      this.renderAlarmTypePie()
      this.renderCourtAlarmBar()
      this.currentPage = 1
      this.renderAlarmRecordTable()
    },
    renderAlarmTypePie() {
      const param = {
        month: this.monthNum
      }
      selectAlarmTypePieDataByMonth(param).then(res => {
        console.log(res)
        const success = res.success
        if (success) {
          const pieData = res.data
          this.doRenderAlarmTypePie(pieData)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    renderCourtAlarmBar() {
      const param = {
        month: this.monthNum
      }
      selectAlarmNumBarDataByMonth(param).then(res => {
        console.log(res)
        const success = res.success
        if (success) {
          const barData = res.data
          this.doRenderCourtAlarmBar(barData)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    doRenderCourtAlarmBar(barData) {
      if (barData != null) {
        const xLabels = []
        const yLabels = []
        for (let i = 0; i < barData.length; i++) {
          xLabels.push(barData[i].tribunalName)
          yLabels.push(barData[i].alarmNum)
        }
        const option = this.barChartOption
        option.xAxis.data = xLabels
        option.series[0].data = yLabels
        this.barChartOption = option
        this.barChart.setOption(this.barChartOption)
      }
    },
    doRenderAlarmTypePie(pieData) {
      if (pieData != null) {
        const powerKey = equipmentTypeMap.get(1)
        let powerValue = 0
        if (pieData['1'] !== undefined) {
          powerValue = pieData['1']
        }
        const hostKey = equipmentTypeMap.get(2)
        let hostValue = 0
        if (pieData['2'] !== undefined) {
          hostValue = pieData['2']
        }
        const cameraKey = equipmentTypeMap.get(3)
        let cameraValue = 0
        if (pieData['3'] !== undefined) {
          cameraValue = pieData['3']
        }
        const audioKey = equipmentTypeMap.get(4)
        let audioValue = 0
        if (pieData['4'] !== undefined) {
          audioValue = pieData['4']
        }

        const computerKey = equipmentTypeMap.get(5)
        let computerValue = 0
        if (pieData['5'] !== undefined) {
          computerValue = pieData['5']
        }
        const series = [
          {
            name: '报警种类分布',
            type: 'pie',
            radius: '70%',
            data: [
              { value: powerValue, name: powerKey },
              { value: hostValue, name: hostKey },
              { value: cameraValue, name: cameraKey },
              { value: audioValue, name: audioKey },
              { value: computerValue, name: computerKey }
            ],
            itemStyle: {
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgb(135,250,202)'
                }
              },
              normal: {
                label: {
                  show: true,
                  formatter: '{b}:{c}({d}%)'
                },
                labelLine: { show: true }
              }
            }
          }
        ]
        this.pieChartOption.series = series
        this.pieChart.setOption(this.pieChartOption)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .top-chart-box{
    background-color: #ffffff;
    height: 400px;
  }
  .chart-box-title{
    background-color: #BBDDFF;
    height: 40px;
  }
</style>
